/**** Specific JS for this page ****/
/* Todo Plugin */
var todo_data = [
    {id: 1, title: "<i class='gicon-gift icon-white'><\/i>Have tea with the Queen", isDone: false},
    {id: 2, title: "<i class='gicon-briefcase icon-white'><\/i>Steal  James Bond car", isDone: true},
    {id: 3, title: "<i class='gicon-heart icon-white'><\/i>Confirm that this template is awesome", isDone: false},
    {id: 4, title: "<i class='gicon-thumbs-up icon-white'><\/i>Nothing", isDone: false},
    {id: 5, title: "<i class='gicon-fire icon-white'><\/i>Play solitaire", isDone: false}
];


function Task(data) {
    this.title = ko.observable(data.title);
    this.isDone = ko.observable(data.isDone);
    this.isEditing = ko.observable(data.isEditing);

    this.startEdit = function (event) {
        console.log("editing");
        this.isEditing(true);
    }

    this.updateTask = function (task) {
        this.isEditing(false);
    }
}

function TaskListViewModel() {
    // Data
    var self = this;
    self.tasks = ko.observableArray([]);
    self.newTaskText = ko.observable();
    self.incompleteTasks = ko.computed(function () {
        return ko.utils.arrayFilter(self.tasks(),
                function (task) {
                    return !task.isDone() && !task._destroy;
                });
    });

    self.completeTasks = ko.computed(function () {
        return ko.utils.arrayFilter(self.tasks(),
                function (task) {
                    return task.isDone() && !task._destroy;
                });
    });

    // Operations
    self.addTask = function () {
        self.tasks.push(new Task({title: this.newTaskText(), isEditing: false}));

        self.newTaskText("");

    };
    self.removeTask = function (task) {
        self.tasks.destroy(task)
    };

    self.removeCompleted = function () {
        self.tasks.destroyAll(self.completeTasks());
    };

    /* Load the data */
    var mappedTasks = $.map(todo_data, function (item) {
        return new Task(item);
    });

    self.tasks(mappedTasks);
}

ko.applyBindings(new TaskListViewModel());
//End Todo Plugin


//Chart - Campaigns
$(function () {
    var data_campaigns = [[1, 10], [2, 9], [3, 8], [4, 6], [5, 5], [6, 3], [7, 9], [8, 10], [9, 12], [10, 14], [11, 15], [12, 13], [13, 11], [14, 10], [15, 9], [16, 8], [17, 12], [18, 14], [19, 16], [20, 19], [21, 20], [22, 20], [23, 19], [24, 17], [25, 15], [25, 14], [26, 12], [27, 10], [28, 8], [29, 10], [30, 12], [31, 10], [32, 9], [33, 8], [34, 6], [35, 5], [36, 3], [37, 9], [38, 10], [39, 12], [40, 14], [41, 15], [42, 13], [43, 11], [44, 10], [45, 9], [46, 8], [47, 12], [48, 14], [49, 16], [50, 12], [51, 10], [52, 9], [53, 8], [54, 6], [55, 5], [56, 3], [57, 9], [58, 10], [59, 12], [60, 14], [61, 15], [62, 13], [63, 11], [64, 10], [65, 9], [66, 8], [67, 12], [68, 14], [69, 16]];
    var data_campaigns2 = [[1, 12], [2, 10], [3, 9], [4, 8], [5, 8], [6, 8], [7, 8], [8, 8], [9, 9], [10, 9], [11, 10], [12, 11], [13, 12], [14, 11], [15, 10], [16, 10], [17, 9], [18, 10], [19, 11], [20, 11], [21, 12], [22, 13], [23, 14], [24, 13], [25, 12], [25, 12], [26, 11], [27, 10], [28, 9], [29, 8], [30, 7], [31, 7], [32, 8], [33, 8], [34, 7], [35, 6], [36, 6], [37, 7], [38, 8], [39, 8], [40, 9], [41, 10], [42, 11], [43, 11], [44, 12], [45, 12], [46, 11], [47, 10], [48, 9], [49, 8], [50, 8], [51, 9], [52, 10], [53, 11], [54, 12], [55, 12], [56, 12], [57, 13], [58, 13], [59, 12], [60, 11], [61, 10], [62, 9], [63, 8], [64, 7], [65, 7], [66, 6], [67, 5], [68, 4], [69, 3]];

    var plot = $.plot($("#placeholder"),
            [{data: data_campaigns, color: "rgba(0,0,0,0.2)", shadowSize: 0,
                    bars: {
                        show: true,
                        lineWidth: 0,
                        fill: true,
                        fillColor: {colors: [{opacity: 1}, {opacity: 1}]}
                    }
                },
                {data: data_campaigns2,
                    color: "rgba(255,255,255, 0.4)",
                    shadowSize: 0,
                    lines: {show: true, fill: false}, points: {show: false},
                    bars: {show: false}
                }
            ],
            {
                series: {
                    bars: {show: true, barWidth: 0.6}
                },
                grid: {show: false, hoverable: true, clickable: false, autoHighlight: true, borderWidth: 0},
                yaxis: {min: 0, max: 20}

            });

    function showTooltip(x, y, contents) {
        $('<div id="tooltip"><div class="date">12 Nov 2012<\/div><div class="title text_color_3">' + x / 10 + '%<\/div> <div class="description text_color_3">CTR<\/div><div class="title ">' + x * 12 + '<\/div><div class="description">Impressions<\/div><\/div>').css({
            position: 'absolute',
            display: 'none',
            top: y - 125,
            left: x - 40,
            border: '0px solid #ccc',
            padding: '2px 6px',
            'background-color': '#fff',
            opacity: 10
        }).appendTo("body").fadeIn(200);
    }

    var previousPoint = null;
    $("#placeholder").bind("plothover", function (event, pos, item) {
        $("#x").text(pos.x.toFixed(2));
        $("#y").text(pos.y.toFixed(2));
        if (item) {
            if (previousPoint != item.dataIndex) {
                previousPoint = item.dataIndex;
                $("#tooltip").remove();
                var x = item.datapoint[0].toFixed(2),
                        y = item.datapoint[1].toFixed(2);
                showTooltip(item.pageX, item.pageY,
                        x);
            }
        }
    });

    //Fundraisers chart
    var data_fund = [[1, 10], [2, 9], [3, 8], [4, 6], [5, 5], [6, 3], [7, 9], [8, 10], [9, 12], [10, 14], [11, 15], [12, 13], [13, 11], [14, 10], [15, 9], [16, 8], [17, 12], [18, 14], [19, 16], [20, 19], [21, 20], [22, 20], [23, 19], [24, 17], [25, 15], [25, 14], [26, 12], [27, 10], [28, 8], [29, 10], [30, 12], [31, 10], [32, 9], [33, 8], [34, 6], [35, 5], [36, 3], ];
    $.plot($("#placeholder2"),
            [{data: data_fund, color: "#fff", shadowSize: 0,
                    bars: {
                        show: true,
                        lineWidth: 0,
                        fill: true,
                        highlight: {
                            opacity: 0.3
                        },
                        fillColor: {colors: [{opacity: 1}, {opacity: 1}]}
                    }
                }
            ],
            {
                series: {
                    bars: {show: true, barWidth: 0.6}
                },
                grid: {show: false, hoverable: true, clickable: false, autoHighlight: true, borderWidth: 0},
                yaxis: {min: 0, max: 23}

            });

    function showTooltip2(x, y, contents) {
        $('<div id="tooltip"><div class="title ">' + x * 2 + '</div><div class="description">Impressions</div></div>').css({
            position: 'absolute',
            display: 'none',
            top: y - 58,
            left: x - 40,
            border: '0px solid #ccc',
            padding: '2px 6px',
            'background-color': '#fff',
            opacity: 10
        }).appendTo("body").fadeIn(200);
    }

    var previousPoint = null;
    $("#placeholder2").bind("plothover", function (event, pos, item) {
        $("#x").text(pos.x.toFixed(2));
        $("#y").text(pos.y.toFixed(2));
        if (item) {
            if (previousPoint != item.dataIndex) {
                previousPoint = item.dataIndex;
                $("#tooltip").remove();
                var x = item.datapoint[0].toFixed(2),
                        y = item.datapoint[1].toFixed(2);
                showTooltip2(item.pageX, item.pageY,
                        x);
            }
        }
    });
    //Envato chart
    $.plot($("#placeholder3"),
            [{data: data_fund, color: "rgba(0,0,0,0.2)", shadowSize: 0,
                    bars: {
                        lineWidth: 0,
                        fill: true,
                        fillColor: {colors: [{opacity: 1}, {opacity: 1}]}
                    },
                    lines: {show: false, fill: true}, points: {show: false}}
            ],
            {
                series: {
                    bars: {show: true, barWidth: 0.6}
                },
                grid: {show: false, hoverable: true, clickable: false, autoHighlight: true, borderWidth: 0},
                yaxis: {min: 0, max: 23}

            });
    //Facebook chart
    $.plot($("#placeholder4"),
            [{data: data_fund, color: "rgba(0,0,0,0.2)", shadowSize: 0,
                    bars: {
                        lineWidth: 0,
                        fill: true,
                        fillColor: {colors: [{opacity: 1}, {opacity: 1}]}
                    },
                    lines: {show: false, fill: true}, points: {show: false}
                }
            ],
            {
                series: {
                    bars: {show: true, barWidth: 0.6}
                },
                grid: {show: false, hoverable: true, clickable: false, autoHighlight: true, borderWidth: 0},
                yaxis: {min: 0, max: 23}
            });
    // End Fundraiser chart
    
       $('.no_sort').click(function () {
                alert('d');
                console.log('dddd');
            })
});
